<template>
  <!-- // 资源储备 -->
  <div class="homePageCard">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">应急资源储备</div>
      <SelectOptions :value="sign" :options="option" @change="selectChange" />
      <!-- <div class="select">
        <select name="chooseDate" @change="select($event.target.value)">
          <option value="">全部</option>
          <option :value="item.value" v-for="(item, index) in option" :key="index">{{ item.label }}</option>
        </select>
      </div> -->
    </div>
    <div class="legends">
      <div class="marginB15" v-for="(item, index) in legends" :key="index">
        <span class="pie_bottom" :style="{ backgroundColor: item.color, 'margin-right': '10px' }"></span>
        <span class="white fontSize12">{{ item.name }}</span>
      </div>
    </div>
    <div class="flex-warp" style="height:85%">
      <div id="Reserve" style="width:50%;height:50%">
        <!-- <Pie3dCharts :optionData="optionData[0]" :totalData="{ text: '队伍', num: teamTotal }" charId="yjczcharId1" :pieOptions="{ innerSize: 90, subtitleY: 60, depth: 40, pieSize: '150%' }" @pieClick="barClickDw($event,'dw')"></Pie3dCharts> -->
      </div>
      <div id="Reserve1" style="width:50%;height:50%">
        <!-- <Pie3dCharts :optionData="optionData[1]" :totalData="{ text: '车辆', num: vehicleTotal }" charId="yjczcharId11" :pieOptions="{ innerSize: 90, subtitleY: 60, depth: 40, pieSize: '150%' }" @pieClick="barClickDw($event,'cl')"></Pie3dCharts> -->
      </div>
      <div id="Reserve2" style="width:50%;height:50%">
        <!-- <Pie3dCharts :optionData="optionData[2]" :totalData="{ text: '装备', num: equipTotal }" charId="yjczcharId12" :pieOptions="{ innerSize: 90, subtitleY: 60, depth: 40, pieSize: '150%' }" @pieClick="barClickDw($event,'zb')"></Pie3dCharts> -->
      </div>
      <div id="Reserve3" style="width:50%;height:50%">
        <!-- <Pie3dCharts :optionData="optionData[3]" :totalData="{ text: '物资', num: suppliesTotal }" charId="yjczcharId13" :pieOptions="{ innerSize: 90, subtitleY: 60, depth: 40, pieSize: '150%' }" @pieClick="barClickDw($event,'wz')"></Pie3dCharts> -->
      </div>
    </div>

    <el-dialog :title="'资源储备-' + title" :visible.sync="dialogZyclVisible" width="70%">
      <el-table :data="tableData" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="50" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of clColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SelectOptions from "@/components/selectOptions.vue";
import { getResourceReserve } from "@/api/EmergencyDisposal/homepagecontent.js";
// import Pie3dCharts from "@/components/highCharts/HighChartsPie3d";
import { dwColums, wzColums, zbColums, clColums } from "@/views/SystemHomepage/HomePageContent/columns";
import { getResourceLevelUnit } from "@/api/common.js";
import { getResourceDetails } from "@/api/EmergencyResources/EmergencyResources.js";
export default {
  name: "ResourceReserve",
  components: { SelectOptions },
  data() {
    return {
      isShowCharts: true,
      dialogZyclVisible: false,
      optionData: [
        [["可调配", 98], ["可调配", 2878]],
        [["可调配", 193], ["可调配", 2427]],
        [["可调配", 3864], ["可调配", 22878]],
        [["可调配", 16000], ["可调配", 41658]]
      ],
      activeName: "first",
      legends: [
        {
          name: "可调配",
          color: "#4FD2FD"
        },
        {
          name: "已调配",
          color: "#FFBC4B"
        }
      ],
      dataS: [
        {
          name: "已调配",
          y: 98,
          color: "#FFBC4B"
        },
        {
          name: "可调配",
          y: 2878,
          color: "#4FD2FD"
        }
      ],
      dataS1: [
        {
          name: "已调配",
          y: 193,
          color: "#FFBC4B"
        },
        {
          name: "可调配",
          y: 2427,
          color: "#4FD2FD"
        }
      ],
      dataS2: [
        {
          name: "已调配",
          y: 3864,
          color: "#FFBC4B"
        },
        {
          name: "可调配",
          y: 22878,
          color: "#4FD2FD"
        }
      ],
      dataS3: [
        {
          name: "已调配",
          y: 16000,
          color: "#FFBC4B"
        },
        {
          name: "可调配",
          y: 41658,
          color: "#4FD2FD"
        }
      ],
      teamTotal: 0,
      vehicleTotal: 0,
      equipTotal: 0,
      suppliesTotal: 0,
      personOrgId: JSON.parse(sessionStorage.getItem("org")).orgId,
      option: [],
      tableData: [],
      clColums: [],
      title: "",
      sign: "",
      unitId: ""
    };
  },
  mounted() {
    this.getResourceReserves();
    this.getLevelUnit();
  },
  methods: {
    async barClickDw(val, name) {
      let orgId = JSON.parse(sessionStorage.getItem("org")).orgId;
      let categoryName = "";
      let state = "";
      let objName = "";
      if (name === "dw") {
        this.title = "队伍";
        this.clColums = dwColums;
        categoryName = "3";
        objName = "teamList";
      } else if (name === "cl") {
        this.title = "车辆";
        this.clColums = clColums;
        categoryName = "1";
        objName = "vehicleList";
      } else if (name === "zb") {
        this.title = "装备";
        this.clColums = zbColums;
        categoryName = "2";
        objName = "equipList";
      } else if (name === "wz") {
        this.title = "物资";
        this.clColums = wzColums;
        categoryName = "4";
        objName = "suppliesList";
      }
      if (val === "可调配") {
        state = "0";
      } else {
        // state = "1";
      }
      let type = "";
      if (val === "已调配") {
        type = "sy";
      } else {
        type = "";
      }
      if (this.unitId) {
        orgId = this.unitId;
      }
      const params = {
        orgId,
        state: state || "",
        categoryName,
        pageNum: 1,
        pageSize: 5000,
        type: type
      };
      const res = await getResourceDetails(params);
      if (res) {
        this.tableData = res[objName].data;
        this.dialogZyclVisible = true;
      }
      console.log(val, name);
    },
    selectChange(val) {
      this.unitId = val;
      console.log(val, "this.unitIdthis.unitIdthis.unitId");
      this.getResourceReserves(val);
    },
    getLevelUnit() {
      getResourceLevelUnit({ orgId: this.personOrgId }).then(res => {
        const option = res.map((i) => {
          return {
            label: i.orgOtherName,
            value: i.id
          };
        });
        option.unshift({ value: "", label: "全部" });
        this.option = option;
      });
    },
    async getResourceReserves(id) {
      const res = await getResourceReserve({ orgId: id || this.personOrgId });
      console.log(res);
      this.dataS[0].y = res.team.assigned;
      this.dataS[1].y = res.team.unassigned;
      this.teamTotal = res.team.total;
      this.dataS1[0].y = res.vehicle.assigned;
      this.dataS1[1].y = res.vehicle.unassigned;
      this.vehicleTotal = res.vehicle.total;
      this.dataS2[0].y = res.equip.assigned;
      this.dataS2[1].y = res.equip.unassigned;
      this.equipTotal = res.equip.total;
      this.dataS3[0].y = res.supplies.assigned;
      this.dataS3[1].y = res.supplies.unassigned;
      this.suppliesTotal = res.supplies.total;

      this.optionData[0] = [["可调配", res.team.unassigned], ["已调配", res.team.assigned]];
      // 车辆
      this.optionData[1] = [["可调配", res.vehicle.unassigned], ["已调配", res.vehicle.assigned]];
      // 装备
      this.optionData[2] = [["可调配", res.equip.unassigned], ["已调配", res.equip.assigned]];
      // 物资
      this.optionData[3] = [["可调配", res.supplies.unassigned], ["已调配", res.supplies.assigned]];
      this.isShowCharts = true;
      this.initCharts(); // 初始化渲染echart图标
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    initCharts() {
      //  获取数据
      const that = this;
      this.$Highcharts.chart("Reserve", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          marginLeft: 25,
          marginRight: 0,
          marginTop: 40,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div ><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          }
        },
        legend: {
          // width: 450,
          // icon: "rect",
          // verticalAlign: "bottom",
          // symbolWidth: 12,
          // symbolHeight: 12,
          // symbolRadius: 4,
          // x: 100,
          // y: 10,
          // layout: "horizontal",
          // align: "right",
          // itemMarginTop: 3,
          // itemStyle: {
          //   fontSize: "12px",
          //   color: "#fff"
          // },
          // itemHoverStyle: {
          //   color: "#fff"
          // }
        },
        subtitle: {
          text: `<span style="font-size: 26px;font-weight:bold;color:#fff">${this.teamTotal}</span><br/><span style="font-size: 18px;color:#fff">队伍总数</span>`,
          x: -5,
          y: 68
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            size: 160,
            depth: 35,
            innerSize: 100,
            distance: -100,
            dataLabels: {
              enabled: false,
              formatter() {
                return `
                <span style="color:${this.point.color}">${this.percentage.toFixed(0)}%</span> ${this.point.y}<br/><span style="color: ${this.point.color}">${this.point.name}</span>`;
              }
            },
            events: {
              click: function (event) {
                if (event.point.name === "00") return;
                that.barClickDw(event.point.name, "dw");
              }
            },
            showInLegend: false,
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            center: [60, 10],
            data: this.dataS
          }
        ]
      });
      this.$Highcharts.chart("Reserve1", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          marginLeft: 40,
          marginRight: 0,
          marginTop: 40,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div ><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          }
        },
        legend: {
          enabled: false
          // width: 450,
          // icon: "rect",
          // verticalAlign: "bottom",
          // symbolWidth: 12,
          // symbolHeight: 12,
          // symbolRadius: 4,
          // x: 100,
          // y: 10,
          // layout: "horizontal",
          // align: "right",
          // itemMarginTop: 3,
          // itemStyle: {
          //   fontSize: "12px",
          //   color: "#fff"
          // },
          // itemHoverStyle: {
          //   color: "#fff"
          // }
        },
        subtitle: {
          text: `<span style="font-size: 26px;font-weight:bold;color:#fff">${this.vehicleTotal}</span><br/><span style="font-size: 18px;color:#fff">车辆总数</span>`,
          x: 7,
          y: 68
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            size: 160,
            depth: 35,
            innerSize: 100,
            distance: -100,
            dataLabels: {
              enabled: false,
              formatter() {
                return `
                <span style="color:${this.point.color}">${this.percentage.toFixed(0)}%</span> ${this.point.y}<br/><span style="color: ${this.point.color}">${this.point.name}</span>`;
              }
            },
            events: {
              click: function (event) {
                if (event.point.name === "00") return;
                that.barClickDw(event.point.name, "cl");
              }
            },
            showInLegend: false,
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            center: [60, 10],
            data: this.dataS1
          }
        ]
      });
      this.$Highcharts.chart("Reserve2", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          marginLeft: 25,
          marginRight: 0,
          marginTop: 40,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div ><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          }
        },
        legend: {
          // width: 450,
          // icon: "rect",
          // verticalAlign: "bottom",
          // symbolWidth: 12,
          // symbolHeight: 12,
          // symbolRadius: 4,
          // x: 100,
          // y: 10,
          // layout: "horizontal",
          // align: "right",
          // itemMarginTop: 3,
          // itemStyle: {
          //   fontSize: "12px",
          //   color: "#fff"
          // },
          // itemHoverStyle: {
          //   color: "#fff"
          // }
        },
        subtitle: {
          text: `<span style="font-size: 26px;font-weight:bold;color:#fff">${this.equipTotal}</span><br/><span style="font-size: 18px;color:#fff">装备库存</span>`,
          x: -5,
          y: 68
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            size: 160,
            depth: 35,
            innerSize: 100,
            distance: -100,
            dataLabels: {
              enabled: false,
              formatter() {
                return `
                <span style="color:${this.point.color}">${this.percentage.toFixed(0)}%</span> ${this.point.y}<br/><span style="color: ${this.point.color}">${this.point.name}</span>`;
              }
            },
            events: {
              click: function (event) {
                if (event.point.name === "00") return;
                that.barClickDw(event.point.name, "zb");
              }
            },
            showInLegend: false,
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            center: [60, 10],
            data: this.dataS2
          }
        ]
      });
      this.$Highcharts.chart("Reserve3", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          marginLeft: 40,
          marginRight: 0,
          marginTop: 40,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div ><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          }
        },
        legend: {
          // width: 450,
          // icon: "rect",
          // verticalAlign: "bottom",
          // symbolWidth: 12,
          // symbolHeight: 12,
          // symbolRadius: 4,
          // x: 100,
          // y: 10,
          // layout: "horizontal",
          // align: "right",
          // itemMarginTop: 3,
          // itemStyle: {
          //   fontSize: "12px",
          //   color: "#fff"
          // },
          // itemHoverStyle: {
          //   color: "#fff"
          // }
        },
        subtitle: {
          text: `<span style="font-size: 26px;font-weight:bold;color:#fff">${this.suppliesTotal}</span><br/><span style="font-size: 18px;color:#fff">物资库存</span>`,
          x: 7,
          y: 68
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            size: 160,
            depth: 35,
            innerSize: 100,
            distance: -100,
            dataLabels: {
              enabled: false,
              formatter() {
                return `
                <span style="color:${this.point.color}">${this.percentage.toFixed(0)}%</span> ${this.point.y}<br/><span style="color: ${this.point.color}">${this.point.name}</span>`;
              }
            },
            events: {
              click: function (event) {
                if (event.point.name === "00") return;
                that.barClickDw(event.point.name, "wz");
              }
            },
            showInLegend: false,
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            center: [60, 10],
            data: this.dataS3
          }
        ]
      });
      // const option = {
      //   legend: {
      //     bottom: "35%",
      //     left: "center",
      //     orient: "vertical",
      //     itemWidth: 15,
      //     itemHeight: 15,
      //     itemGap: 40,
      //     textStyle: {
      //       color: "#fff"
      //     }
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     backgroundColor: "rgba(0,24,34,0.25)",
      //     borderWidth: 0,
      //     textStyle: {
      //       color: "#fff"
      //     }
      //   },
      //   series: [
      //     {
      //       type: "pie",
      //       label: {
      //         show: false,
      //         normal: {
      //           formatter: "{total|2976人}" + "\n\r" + "{active|队伍总数}",
      //           position: "center",
      //           color: "white",
      //           rich: {
      //             total: {
      //               fontSize: 22,
      //               fontWeight: "bold",
      //               fontFamily: "微软雅黑",
      //               color: "#fff"
      //             },
      //             active: {
      //               fontFamily: "微软雅黑",
      //               fontSize: 16,
      //               color: "#fff",
      //               lineHeight: 20
      //             }
      //           }
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       radius: ["29%", "47%"],
      //       center: ["20%", "26%"],
      //       data: [
      //         {
      //           name: "可调配",
      //           value: 2878,
      //           itemStyle: {
      //             color: "#4FD2FD"
      //           }
      //         },
      //         {
      //           name: "已调配",
      //           value: 98,
      //           itemStyle: {
      //             color: "#F59066"
      //           }
      //         }
      //       ]
      //     },
      //     {
      //       type: "pie",
      //       label: {
      //         show: false,
      //         normal: {
      //           formatter: "{total|2620辆}" + "\n\r" + "{active|车辆总数}",
      //           position: "center",
      //           color: "white",
      //           rich: {
      //             total: {
      //               fontSize: 22,
      //               fontWeight: "bold",
      //               fontFamily: "微软雅黑",
      //               color: "#fff"
      //             },
      //             active: {
      //               fontFamily: "微软雅黑",
      //               fontSize: 16,
      //               color: "#fff",
      //               lineHeight: 20
      //             }
      //           }
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       radius: ["29%", "47%"],
      //       center: ["80%", "26%"],
      //       color: "#F59066",
      //       data: [
      //         {
      //           name: "可调配",
      //           value: 2427,
      //           itemStyle: {
      //             color: "#148AF3"
      //           }
      //         },
      //         {
      //           name: "已调配",
      //           value: 193,
      //           itemStyle: {
      //             color: "#F59066"
      //           }
      //         }
      //       ]
      //     },
      //     {
      //       type: "pie",
      //       label: {
      //         show: false,
      //         normal: {
      //           formatter: "{total|26742}" + "\n\r" + "{active|装备库存}",
      //           position: "center",
      //           color: "white",
      //           rich: {
      //             total: {
      //               fontSize: 22,
      //               fontWeight: "bold",
      //               fontFamily: "微软雅黑",
      //               color: "#fff"
      //             },
      //             active: {
      //               fontFamily: "微软雅黑",
      //               fontSize: 16,
      //               color: "#fff",
      //               lineHeight: 20
      //             }
      //           }
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       radius: ["29%", "47%"],
      //       center: ["20%", "76%"],
      //       color: "#FDDD67",
      //       data: [
      //         {
      //           name: "可调配",
      //           value: 22878,
      //           itemStyle: {
      //             color: "#148AF3"
      //           }
      //         },
      //         {
      //           name: "已调配",
      //           value: 3864,
      //           itemStyle: {
      //             color: "#F59066"
      //           }
      //         }
      //       ]
      //     },
      //     {
      //       type: "pie",
      //       label: {
      //         show: false,
      //         normal: {
      //           formatter: "{total|57658}" + "\n\r" + "{active|物资库存}",
      //           position: "center",
      //           color: "white",
      //           rich: {
      //             total: {
      //               fontSize: 22,
      //               fontWeight: "bold",
      //               fontFamily: "微软雅黑",
      //               color: "#fff"
      //             },
      //             active: {
      //               fontFamily: "微软雅黑",
      //               fontSize: 16,
      //               color: "#fff",
      //               lineHeight: 20
      //             }
      //           }
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       radius: ["29%", "47%"],
      //       center: ["80%", "76%"],
      //       color: "#FDDD67",
      //       data: [
      //         {
      //           name: "可调配",
      //           value: 41658,
      //           itemStyle: {
      //             color: "#148AF3"
      //           }
      //         },
      //         {
      //           name: "已调配",
      //           value: 16000,
      //           itemStyle: {
      //             color: "#F59066"
      //           }
      //         }
      //       ]
      //     }
      //   ]
      // };
      // var myChart = this.$echarts.init(document.getElementById("Reserve")); // 图标初始化
      // myChart.setOption(option); // 渲染页面
      // // 随着屏幕大小调节图标
      // window.addEventListener("resize", () => {
      //   myChart.resize();
      // });
    }
  }
};
</script>

<style scoped lang="less">
.homePageCard {
  height: 100%;
  position: relative;
}

:deep(.el-tabs--top.el-tabs--card > .el-tabs__header) {
  border-bottom: none;

  .el-tabs__item {
    color: #fff;
    padding: 0;
    width: 20%;
    height: auto;
    line-height: 30px;
    border: 1px solid #14a8ed;
    padding-left: 0;
    text-align: center;
    border-radius: 4px;

    &:nth-child(2) {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }

  .el-tabs__nav {
    float: none;
    display: flex;
    justify-content: space-around;
    margin: 20px;
    border: none;
  }

  .el-tabs__item.is-active {
    border-bottom: #14a8ed;
    background-color: #14a8ed;
  }
}

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-tabs__content) {
    flex: 1;
  }
}

.flex-warp {
  display: flex;
  flex-wrap: wrap;
}

.pie_bottom {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.legends {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
}

:deep(.el-dialog__header) {
  background: #5077ff;

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 5px;
    font-size: 30px !important;
  }

  .el-icon-close {
    color: #fff;
  }

  padding: 10px;
}

:deep(.el-dialog__body) {
  padding: 10px;
}

:deep(.el-table__fixed) {
  height: 580px !important;
}
</style>
